
<template>
  <!-- 报销管理 -->
  <div class="incolumn">
    <div class="incolumn_countr">
      <div class="search-box">
        <hy-search
          ref="query"
          :searchTitle="searchTitle"
          v-model="searcher"
          :col="6"
          @search="getData(0)"
        ></hy-search>
      </div>
    </div>
    <!-- 表单 -->
    <div class="from_tab">
      <el-table :data="tableData" height="650" max-height="600">
        <el-table-column prop="createOnStr" label="申请日期" align="center"></el-table-column>
        <el-table-column prop="priceToatl" label="金额" align="center"></el-table-column>
        <el-table-column prop="creater" label="申请人" align="center"></el-table-column>
        <el-table-column prop="departName" label="申请部门" align="center"></el-table-column>
        <el-table-column prop="stateStr" label="状态" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="small"
              v-if="scope.row.paixu==1"
              @click="Toexamine(scope.row.id,0)"
            >审核</el-button>
            <el-button
              type="warning"
              size="small"
              v-show="scope.row.paixu == 2"
              @click="payment(scope.row.id,0)"
            >付款</el-button>
            <el-button type="primary" size="small" @click="Toexamine(scope.row.id,1)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- ================================================================ -->
      <!-- ========= 分页========= -->
      <!-- ================================================================ -->
      <div class="bottom_slate">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page.sync="current"
          :page-size="pagesize"
          @current-change="handleCurrentChange"
          :total="total"
        ></el-pagination>
      </div>
      <!-- ============================================================================== -->
      <!-- =================== 审核弹框 ==========================-->
      <!-- ============================================================================== -->
      <el-dialog :visible.sync="dialogTableVisible" :modal-append-to-body="false" width="1000px">
        <div class="herd_bud"></div>
        <div class="from_bt">报销审核</div>
        <br />
        <p class="Purchase_Division"></p>
        <div style="display:flex;justify-content: space-around; margin-top:10px; ">
          <div style="display:flex; align-items: center;">
            <span style="width:60px;">部门</span>
            <el-input v-model="item.departName" :disabled="true"></el-input>
          </div>
          <div style="display:flex;align-items: center;">
            <span style="width:60px;">申请人</span>
            <el-input v-model="item.name" :disabled="true"></el-input>
          </div>
          <div style="display:flex;align-items: center;">
            <span style="width:80px;">金额(元)</span>
            <el-input v-model="item.priceTotal" :disabled="true"></el-input>
          </div>
        </div>
        <div class="demo-form-inline">
          <el-table :data="tableDataBa" border style="width: 100%" :max-height="400" stripe>
            <el-table-column prop="date" label="发生日期" width="150" align="center"></el-table-column>
            <el-table-column prop="main" label="报销内容" align="center"></el-table-column>
            <el-table-column prop="billNum" label="单据数量" width="150" align="center"></el-table-column>
            <el-table-column prop="price" label="金额（元）" width="150" align="center"></el-table-column>
            <el-table-column prop="note" label="备注" align="center"></el-table-column>
          </el-table>
          <table class="surface">
            <tr>
              <td style="width:120px;">金额（元）</td>
              <td>{{item.priceTotal}}元</td>
            </tr>
          </table>
          <el-table
            :data="rejectList"
            border
            style="width: 100%;margin-top:-1px;"
            stripe
            v-if="rejectList.length>0"
          >
            <el-table-column prop="Time" label="驳回时间" width="150" align="center"></el-table-column>
            <el-table-column prop="Main" label="驳回原因" align="center"></el-table-column>
            <el-table-column prop="Name" label="审批人" width="150" align="center"></el-table-column>
          </el-table>
          <div class="demo-image__preview" v-if="srcList.length>0">
            <el-image
              style="width: 100px; height: 100px; margin:10px;"
              :src="k"
              v-for="k in srcList"
              :key="k"
              :preview-src-list="srcList"
            ></el-image>
          </div>
          <div class="from_btns">
            <el-button @click="confirm(1)" type="primary" size="small" v-if="shBtn==0">通过</el-button>
            <el-button @click="Reject" type="danger" size="small" v-if="shBtn==0">驳回</el-button>
            <el-button @click="dialogTableVisible = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- =========================================================== -->
      <!-- =================== 驳回 ================ -->
      <!-- =========================================================== -->
      <el-dialog
        title="驳回"
        :visible.sync="dialogTableVisibleBc"
        :modal-append-to-body="false"
        width="1000px"
      >
        <div class="color_box"></div>
        <el-input
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 6}"
          placeholder="请输入内容"
          v-model="main"
        ></el-input>
        <div class="from_btn">
          <el-button @click="confirm(2)" type="primary" size="small">确认</el-button>
          <el-button @click="RejectBotas" type="info" size="small">取消</el-button>
        </div>
      </el-dialog>
      <!-- =================================================================== -->
      <!-- ==================== 付款弹框 ========================= -->
      <!-- =============================================================== -->
      <el-dialog :visible.sync="dialogTableVisibleBe" :modal-append-to-body="false" width="1100px">
        <div class="herd_bud"></div>
        <div class="from_bt">付款信息</div>
        <br />
        <p class="Purchase_Division"></p>
        <el-form :model="item" :inline="true" class="demo-form-inline" label-width="100px">
          <el-form-item label="部门名称">
            <el-input v-model="item.departName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="申请人">
            <el-input v-model="item.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="报销金额">
            <el-input v-model="item.priceTotal" :disabled="true"></el-input>
          </el-form-item>
          <!-- <el-form-item label="开户行">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="银行账户">
            <el-input></el-input>
          </el-form-item> -->
        </el-form>
        <el-table :data="tableDataBa" border style="width: 100%" :max-height="400" stripe>
          <el-table-column prop="date" label="发生日期" width="150" align="center"></el-table-column>
          <el-table-column prop="main" label="报销内容" align="center"></el-table-column>
          <el-table-column prop="billNum" label="单据数量" width="150" align="center"></el-table-column>
          <el-table-column prop="price" label="金额（元）" width="150" align="center"></el-table-column>
          <el-table-column prop="note" label="备注" align="center"></el-table-column>
        </el-table>
        <table class="surface">
          <tr>
            <td style="width:120px;">合计（元）</td>
            <td>{{item.priceTotal}}元</td>
          </tr>
        </table>
        <div>
          <div class="up_phto">
            上传凭证
            <el-upload
              :file-list="imgList"
              action="/apis/ComApi.asmx/UpImg"
              list-type="picture-card"
              :on-remove="function(res,file){ return handleRemove(res,file)}"
              :on-success="function (res, file) { return handleSuccess(res, file)}"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="imgUrl" alt />
            </el-dialog>
          </div>
          <div class="from_btn">
            <el-button @click="confirm(3)" type="primary" size="small">确认</el-button>
            <el-button @click="dialogTableVisibleBe = false" type="info" size="small">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data () {
    return {
      //图片上传
      imgUrl: "",
      imgList: [],
      //弹窗
      dialogVisible: false,
      dialogTableVisible: false,//审核详情弹框
      dialogTableVisibleBa: false,
      dialogTableVisibleBc: false,//驳回弹框
      dialogTableVisibleBe: false,//付款弹框

      //列表表单
      tableData: [],
      item: {},//获取返回集合的第一条数据，主要展示当前步骤
      tableDataBa: [],//报销详情
      stepList: [],//报销步骤
      rejectList: [],//驳回记录
      //分页    
      start: "",
      end: "",
      total: 1,
      current: 1,
      pagesize: 10,
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入用途",
          prop: "customProductName"
        },

        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      id: 0,
      shBtn: 1,
      Mark: 0,
      main: "",
      srcList: [],
      creater:0,
    };
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getData(0);
  },
  methods: {
    // 首页列表数据
    getData (page) {
      let start = ""; let end = "";
      if (this.searcher.issuanceDate != null && this.searcher.issuanceDate != "") { start = this.searcher.issuanceDate[0]; end = this.searcher.issuanceDate[1]; }
      let obj = {
        key: this.searcher.customProductName ? this.searcher.customProductName : "",
        start: start,
        end: end,
        creater: this.creater,
        pn: page,
        PerPageSize: this.pagesize
      };
      var objs = JSON.stringify(obj);
      let the = { index: 1, jsondata: objs }
      axios.post("/apis/FinanceManage.asmx/GetData", the).then(({ data }) => {
        var list = eval('(' + data.d + ')');
        console.log(list);
        this.total = list.count;
        this.tableData = list.data;
      });
    },
    Toexamine (e, shows) {
      this.srcList=[];
      this.dialogTableVisible = true;
      this.shBtn = shows; this.id = e;
      var obj = { id: e };
      var objs = JSON.stringify(obj);
      let the = { index: 14, jsondata: objs };
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        if (list == null) { this.$message.error("数据异常"); }
        else {
          this.tableDataBa = list.basemess; this.stepList = list.stepList, this.rejectList = list.rejectList, this.item = list.basemess[0];
          if (list.basemess[0].imgList != null) {
            var imgs = list.basemess[0].imgList.split('@');
            for (var i = 0; i < imgs.length; i++) { if (imgs[i] != "") { this.srcList.push(imgs[i]); } }
          }
        }
        //status: "success", uid: this.guid(), 
        // console.log(this.srcList)
      });
    },
    //审核操作
    confirm (e) {
      if (this.Mark == 0) {
        if (e == 1 || e == 2) {
          if (e == 2) { if (this.main == "") { this.$message.error("驳回事由非空"); return } }
          var obj = { itemId: this.id, main: this.main, state: e, creater: this.creater };
          var objs = JSON.stringify(obj); let the = { index: 3, jsondata: objs };
          this.Mark = 1;
          axios.post("/apis/MyCenter.asmx/Examine", the).then(({ data }) => {
            var list = JSON.parse(data.d);
            if (list.flag == true) {
              this.$message.success(list.tip);
              this.dialogTableVisibleBc = false;
              this.dialogTableVisible = false;
              this.getData(this.current - 1);
            }
            else { this.$message.error(list.tip); }
          })
        } else {
          if (e == 3) { if (this.imgList.length == ""||this.imgList.length == 0) { this.$message.error("请上传凭证"); return } }
          let imgList = "";
          if (this.imgList.length > 0) { for (var i = 0; i < this.imgList.length; i++) { imgList += this.imgList[i].url + "@"; } }
          var obj = { itemId: this.id, creater: this.creater, imgList: imgList };
          var objs = JSON.stringify(obj); let the = { index: 5, jsondata: objs };
          this.Mark = 1;
          axios.post("/apis/MyCenter.asmx/Examine", the).then(({ data }) => {
            var list = JSON.parse(data.d);
            if (list.flag == true) {
              this.$message.success(list.tip);
              this.dialogTableVisibleBe = false;
              this.getData(this.current - 1);
            }
            else { this.$message.error(list.tip); }
          })

        }
      }
    },
    //一级驳回
    Reject () {
      this.dialogTableVisibleBc = true;
    },
    //二级取消
    RejectBotas () {
      this.dialogTableVisibleBc = false;
    },
    //付款
    payment (e, shows) {
      this.dialogTableVisibleBe = true;
      this.shBtn = shows; this.id = e;
      var obj = { id: e };
      var objs = JSON.stringify(obj);
      let the = { index: 14, jsondata: objs };
      axios.post("/apis/MyCenter.asmx/GetData", the).then(({ data }) => {
        var list = JSON.parse(data.d);
        if (list == null) { this.$message.error("数据异常"); } else { this.tableDataBa = list.basemess; this.item = list.basemess[0] }
      });
    },
    //上传------图片
    S4 () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); },
    guid () { return this.S4() + this.S4() + this.S4() + this.S4(); },
    handleRemove (res, file) {
      let filelist = this.imgList;
      for (let ind = 0; ind < filelist.length; ind++) {
        const element = filelist[ind];
        if (element.uid == res.uid) { filelist.splice(ind, 1); }
      }
      this.imgList = filelist;
    },
    handleSuccess (response, file) {
      var datas = this.$x2js.xml2js(response);
      var url = "" + datas.UpFileReturn.fullurl;
      this.imgList.push({
        status: "success", uid: file.uid, src: url, url: url
      });
    },
    ////////////////////////////////////////////////////////////   分割线
    ////////////////////////////////////////////////////////////   分割线
    ////////////////////////////////////////////////////////////   分割线
    ////////////////////////////////////////////////////////////   分割线
    //合计
    getSummaries (param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计(元)";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index === 4) {
            this.daxie = this.changeNumMoneyToChinese(sums[index]);
            console.log(sums[index], 8888888888888);
            sums[index] += " 元";
          } else {
            sums[index] = null;
          }
        }
      });
      return sums;
    },
    //大写金额转换方法
    changeNumMoneyToChinese (money) {
      var cnNums = new Array(
        "零",
        "壹",
        "贰",
        "叁",
        "肆",
        "伍",
        "陆",
        "柒",
        "捌",
        "玖"
      ); //汉字的数字
      var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
      var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
      var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
      var cnInteger = "整"; //整数金额时后面跟的字符
      var cnIntLast = "元"; //整型完以后的单位
      var maxNum = 999999999999999.9999; //最大处理的数字
      var IntegerNum; //金额整数部分
      var DecimalNum; //金额小数部分
      var ChineseStr = ""; //输出的中文金额字符串
      var parts; //分离金额后用的数组，预定义
      var Symbol = ""; //正负值标记
      if (money == "") {
        return "";
      }

      money = parseFloat(money);
      if (money >= maxNum) {
        alert("超出最大处理数字");
        return "";
      }
      if (money == 0) {
        ChineseStr = cnNums[0] + cnIntLast + cnInteger;
        return ChineseStr;
      }
      if (money < 0) {
        money = -money;
        Symbol = "负 ";
      }
      money = money.toString(); //转换为字符串
      if (money.indexOf(".") == -1) {
        IntegerNum = money;
        DecimalNum = "";
      } else {
        parts = money.split(".");
        IntegerNum = parts[0];
        DecimalNum = parts[1].substr(0, 4);
      }
      if (parseInt(IntegerNum, 10) > 0) {
        //获取整型部分转换
        var zeroCount = 0;
        var IntLen = IntegerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = IntegerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              ChineseStr += cnNums[0];
            }
            zeroCount = 0; //归零
            ChineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            ChineseStr += cnIntUnits[q];
          }
        }
        ChineseStr += cnIntLast;
        //整型部分处理完毕
      }
      if (DecimalNum != "") {
        //小数部分
        var decLen = DecimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = DecimalNum.substr(i, 1);
          if (n != "0") {
            ChineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (ChineseStr == "") {
        ChineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (DecimalNum == "") {
        ChineseStr += cnInteger;
      }
      ChineseStr = Symbol + ChineseStr;

      return ChineseStr;
    },
    //分页
    handleCurrentChange (e) {
      this.getData(e - 1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.incolumn_countr {
  margin-left: 15px;
  height: 50px;
  width: 96.5%;
  background-color: white;
  padding-top: 10px;
}
.block {
  margin-top: -10px;
  margin-left: 20px;
  cursor: pointer;
}
.herd_bud {
  margin-top: -30px;
  height: 20px;
  width: 5px;
  background-color: rgb(90, 15, 228);
}
.from_bt {
  margin-top: -20px;
  margin-left: 10px;
  font-size: $font-size-medium-x;
}
.bottom_slate {
  height: 60px;
  margin-top: 20px;
  text-align: center;
}
//第二块
.from_tab {
  margin-top: 20px;
  width: 98%;
  margin-left: 15px;
}

// 弹框
.from_cg {
  font-size: 18px;
  font-weight: bold;
  margin-top: -40px;
}
.Purchase_Division {
  border: 0.5px solid $linecolor;
}
.demo-form-inline {
  margin-top: 10px;
}
.from_btns {
  text-align: center;
  margin-top: 50px;
}
table tr {
  height: 60px;
}
table tr td {
  border: 1px solid #e7e7e7;
  border-top: 0.5px;
  text-align: center;
  width: 90%;
}
.from_btn {
  margin-top: 20px;
  text-align: center;
}
.surface {
  background-color: rgba(245, 245, 245, 0.9);
}
.up_phto {
  margin-top: 30px;
  text-align: center;
}
</style>